import React, { useState } from 'react';
import './practiceList.less';
interface IProps {
  title: string;
  data: ISelectOption[];
  //   当按钮被点击时，调用的回调函数 void没有返回值
  onChange: (value: string | number) => void;
}
export default function PracticeList({ title, data, onChange }: IProps) {
  // 按钮选中的当前索引值
  let [curIdx, setCurIdx] = useState(0);
  return (
    <div className="practiceList">
      <h4>{title}</h4>
      <ul>
        {data.map((item, index) => (
          <li
            key={item.value}
            onClick={() => {
              setCurIdx(index);
              onChange(item.value);
            }}
            className={index === curIdx ? 'active' : ''}
          >
            {item.key}
          </li>
        ))}
      </ul>
    </div>
  );
}
